<template>
  <div>
    <el-button-group>
      <el-button type="success" @click="detailAdd">新增</el-button>
      <el-button type="warning" @click="detailUpp">修改</el-button>
      <el-button type="danger" @click="detaiRemove">删除</el-button>
    </el-button-group>
    <!--  -->
    <el-input
      placeholder="请输入商品名"
      v-model="inpV"
      style="width:200px;margin-left:40%"
      @change="inpt"
    ></el-input>
    <el-table
      :data="DetailData"
      height="400"
      border
      style="width: 100%;margin:15px 0"
      @selection-change="handleSele"
    >
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="name" label="商品名" width="180"></el-table-column>
      <el-table-column prop="bianhao" label="编号"></el-table-column>
      <el-table-column prop="leixing" label="类型"></el-table-column>
      <el-table-column prop="guige" label="规格"></el-table-column>
      <el-table-column prop="caizhi" label="材质"></el-table-column>
      <el-table-column prop="color" label="颜色"></el-table-column>
      <el-table-column prop="pinpai" label="品牌"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column prop="xinghao" label="型号"></el-table-column>
      <el-table-column prop="status" label="收藏"></el-table-column>
      <el-table-column prop="xiaoliang" label="销量"></el-table-column>
      <el-table-column prop="type" label="类别"></el-table-column>
      <el-table-column prop="tese" label="特色" min-width="100" show-overflow-tooltip></el-table-column>
      <el-table-column prop="youhui" label="优惠" min-width="300"></el-table-column>
    </el-table>
    <!-- <el-table
      :data="DetailData"
      height="380"
      border
      style="width: 100%;margin:15px 0"
      @selection-change="handleSele"
    >
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="name" label="商品名" width="180"></el-table-column>
      <el-table-column prop="bianhao" label="编号"></el-table-column>
      <el-table-column prop="leixing" label="类型"></el-table-column>
      <el-table-column prop="guige" label="规格"></el-table-column>
      <el-table-column prop="caizhi" label="材质"></el-table-column>
      <el-table-column prop="color" label="颜色"></el-table-column>
      <el-table-column prop="pinpai" label="品牌"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column prop="xinghao" label="型号"></el-table-column>
      <el-table-column prop="status" label="收藏"></el-table-column>
      <el-table-column prop="xiaoliang" label="销量"></el-table-column>
    </el-table>-->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :currentPage="currentPage"
      :pageSize="pageSize"
      @current-change="current"
    ></el-pagination>

    <!--  -->
    <el-dialog title="新增" :visible.sync="modlebox" width="50%" center>
      <!--  -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        :inline="true"
      >
        <el-form-item label="商品名" prop="name">
          <el-input v-model="ruleForm.name" style="width:525px"></el-input>
        </el-form-item>

        <el-form-item label="编号" prop="bianhao">
          <el-input v-model="ruleForm.bianhao"></el-input>
        </el-form-item>

        <el-form-item label="类别">
          <el-select v-model="ruleForm.type" placeholder="请选择类别">
            <el-option
              :label="item"
              :value="item"
              v-for="(item ,index) in  detailType"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="类型" prop="leixing">
          <el-input v-model="ruleForm.leixing"></el-input>
        </el-form-item>

        <el-form-item label="规格" prop="guige">
          <el-input v-model="ruleForm.guige"></el-input>
        </el-form-item>
        <el-form-item label="材质" prop="caizhi">
          <el-input v-model="ruleForm.caizhi"></el-input>
        </el-form-item>
        <el-form-item label="颜色" prop="color">
          <el-input v-model="ruleForm.color"></el-input>
        </el-form-item>
        <el-form-item label="品牌" prop="pinpai">
          <el-input v-model="ruleForm.pinpai"></el-input>
        </el-form-item>
        <el-form-item label="型号" prop="xinghao">
          <el-input v-model="ruleForm.xinghao"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="ruleForm.price"></el-input>
        </el-form-item>
        <el-form-item label="原价" prop="price">
          <el-input v-model="ruleForm.oldprice"></el-input>
        </el-form-item>

        <!--  -->
        <el-form-item label="特色">
          <el-input type="textarea" v-model="ruleForm.tese"></el-input>
        </el-form-item>

        <el-form-item label="优惠">
          <el-input type="textarea" v-model="ruleForm.youhui"></el-input>
        </el-form-item>
      </el-form>

      <!--  -->

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="modleOk('ruleForm')">确 定</el-button>
        <el-button @click="modlebox = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
  "detail"
);
export default {
  name: "Detail",
  data() {
    return {
      isUpp: false,
      inpV: "",
      detailType: [
        "注册基础真题/教辅",
        "注册公用设备工程师",
        "注册环保工程师",
        "注册电气工程师",
        "注册结构工程师",
        "注册岩土工程师",
        "注册消防工程师"
      ],
      modlebox: false,
      rules: {
        name: [{ required: true, message: "请输入商品名", trigger: "blur" }],
        bianhao: [{ required: true, message: "请输入编号", trigger: "blur" }],
        leixing: [{ required: true, message: "请输入类型", trigger: "blur" }],
        guige: [{ required: true, message: "请输入规格", trigger: "blur" }],
        color: [{ required: true, message: "请输入颜色", trigger: "blur" }],
        pinpai: [{ required: true, message: "请输入品牌", trigger: "blur" }],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
        caizhi: [{ required: true, message: "请输入材质", trigger: "blur" }],
        xinghao: [{ required: true, message: "请输入型号", trigger: "blur" }]
      }
    };
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    ...mapMutations(["setSele", "steForm", "setCurrentPage"]),
    ...mapActions(["getDetail", "getAdd", "getRemove", "getSou"]),
    current(page) {
      this.setCurrentPage(page);
      this.getDetail();
    },
    handleSele(valArr) {
      this.setSele(valArr);
    },
    detaiRemove() {
      if (!confirm("是否要进行此项操作")) {
        return;
      }
      this.getRemove(this.seleId.join(",")).then(() => {
        this.$message({
          message: "删除成功",
          type: "success"
        });
      });
    },
    inpt(val) {
      this.getSou(val);
    },
    detailAdd() {
      this.modlebox = true;
      this.isUpp = false;
      this.steForm(this.isUpp);
    },
    detailUpp() {
      this.isUpp = true;

      if (this.seleVal.length == 1) {
        this.steForm(this.isUpp);

        this.modlebox = true;
      } else {
        this.$message({
          message: "修改项有且只有一项",
          type: "warning"
        });
      }
    },
    modleOk(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.getAdd(this.isUpp).then(() => {
            this.modlebox = false;
            this.$message({
              message: "新增成功",
              type: "success"
            });
            this.isUpp = false;
          });
        }
      });
    }
  },
  computed: {
    ...mapState([
      "DetailData",
      "seleVal",
      "ruleForm",
      "seleId",
      "currentPage",
      "pageSize",
      "total"
    ])
  }
};
</script>

<style>
</style>
